<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>添加银行卡</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <style>
        body {
            background: #f3f3f3;
            font-size: 14px;
            width: 100%;
            overflow: hidden;
        }

        .aui-icon-left {
            padding-left: 10px;
        }

        .aui-slide-page-active {
            background: #327afa;
        }

        /*        header {
                    width: 100%;
                    height: 45px;
                    background: #fff;
                    position: relative;
                    z-index: 9;
                }
                .win_title{
                    text-align: center;
                    width: 100%;
                    line-height: 45px;
                    height: 45px;
                    font-size: 16px;
                }*/
        .aui-iconfont {
            position: absolute;
        }

        .aui-list-view:after {
            border: none;
        }

        .aui-pull-right {
            margin-right: 20px;
        }

        .cancel {
            background: #d7e5ff;
            border-color: #d7e5ff;
            color: #327afa;
            width: 50%;
            float: left;
        }

        .confirm {
            width: 50%;
            float: left;
        }

        input.inputCardNo, input.inputName, input.inputNo {
            line-height: 25px;
            margin: 0;
            width: inherit;
            padding: 0;
            border: 0;
            width: 80%;
        }

        .myBtn {
            /* position: fixed;
             bottom: 0;*/
            width: 90%;
            margin: 0 auto;
        }

        .myBtn.disable {
            background: #d9d9d9;
            color: #bababa;
        }

        .aui-btn-block {
            width: 50%;
            margin: 0 auto;
            padding: 10px;
        }

        .aui-btn-info.aui-btn-outlined {
            color: #327afa;
        }

        .aui-btn-info {
            border: 1px solid #327afa;
            margin-top: 30px;
        }

        .aui-btn-info:visited {

        }

        .spanOk {
            display: block;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            background: #ff3333;
            position: relative;
            margin: 0 auto;
            margin-bottom: 10px;
        }

        .spanOk:before {
            position: absolute;
            content: "\e645";
            left: 26%;
            top: 10%;
            color: #fff;
            font-size: 25px;
        }

        .ok {
            text-align: center;
        }

        .result {
            margin-top: 50px;
            display: none;
        }

        .headerCardInfo {
            display: none;
        }

        .contain {
            width: 100%;
            transition: .5s;
        }

        .writeCardNo, .writeCardInfo {
            width: 100%;
            float: left;
        }

        .phone.aui-list-view {
            margin-bottom: 0px;
        }

        .showCardInfo {
            -webkit-transform: translateX(-50%);
        }

        .cardTips {
            padding: 5px 15px;
            font-size: 12px;
        }

        .fuwu input[type="checkbox"] {
            vertical-align: middle;
            margin-right: 5px;
        }
    </style>
</head>
<body>
<!-- <header class="myBorder">
    <div class="win_title aui-border-b headerCardNo">
        <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
        <div class="">
            添加银行卡
        </div>
    </div>
    <div class="win_title aui-border-b headerCardInfo">
        <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="showCardInfoBack()"></div>
        <div class="">
            填写银行卡信息
        </div>
    </div>
</header> -->
<header class="aui-bar aui-bar-nav aui-border-b headerCardNo">
    <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
    <div class="aui-title">添加银行卡</div>
</header>

<div class="contain">
    <div class="writeCardInfo">
        <div class="cardTips">
            信息加密处理，仅用于银行验证
        </div>
        <ul class="aui-list-view">
            <li class="aui-list-view-cell">
                <span>卡类型</span>
                中国农业银行储蓄卡
            </li>
        </ul>
        <ul class="aui-list-view">
            <li class="aui-list-view-cell">
                <span>姓名</span>
                <input type="text" onpropertychange="checkName(this)" oninput="checkName(this)" class="inputName"
                       name="" placeholder="真实姓名" value="555">
            </li>
            <li class="aui-list-view-cell">
                <span>证件类型</span>
                <span class="active">身份证</span>
            </li>
            <li class="aui-list-view-cell">
                <span>证件号</span>
                <input type="text" class="inputNo" onpropertychange="checkNo(this)" oninput="checkNo(this)" name=""
                       placeholder="证件号" value="44088219910710117X">
            </li>
        </ul>
        <ul class="aui-list-view phone">
            <li class="aui-list-view-cell">
                <span>手机号</span>
                <input type="number" onpropertychange="checkPhoneNo(this)" oninput="checkPhoneNo(this)"
                       class="inputCardNo" placeholder="留在银行手机号" value="18718341993">
            </li>
        </ul>
        <div class="fuwu cardTips">
            <input type="checkbox" name="" tapmode id="agree">同意<label for="agree" class="active">《服务协议》</label>
        </div>
        <div class="myBtn disable checkBtn" tapmode>下一步</div>
    </div>
</div>
<!-- 控制影藏显示 -->
<div class="result">
    <div class="ok">
        <span class="aui-iconfont aui-icon-check spanOk"></span>
        <p>修改成功</p>
    </div>
    <div class="aui-btn aui-btn-info aui-btn-block aui-btn-outlined">
        去首页
    </div>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/index.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript">
    var isName = false, isNo = false, isPhone = false,isAgree=false;
    apiready = function () {
        api.parseTapmode();
        var mobile = api.pageParam.mobile;
        var header = $api.dom('header');
        var footer = $api.dom('footer');
        $(".checkBtn").unbind("click").bind("click", function () {
            noPass()
        });
        $api.fixIos7Bar(header);
    }


    function checkNo(obj) {
        var isIDCard1 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/g;//十五位身份证
        var isIDCard2 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|(X|x))$/g;//十八位身份证
        var No = $(obj).val();
        if (No.length == 15) {
            if (isIDCard1.test(No)) {
                isNo = true;
                checkAll();
            } else {
                isNo = false;
                checkAll();
            }
        } else if (No.length == 18) {
            if (isIDCard2.test(No)) {
                isNo = true;
                checkAll();
            } else {
                isNo = false;
                checkAll();
            }
        } else if (No.length > 18) {
            $(obj).val($(obj).val().substr(0, 18));
        } else {
            isNo = false;
            checkAll();
        }
    }
    function checkName(obj) {
        var Name = $(obj).val();
        if (Name.length > 0) {
            isName = true;
            checkAll();
        } else {
            isName = false;
            checkAll();
        }
    }
    function checkPhoneNo(obj) {
        if (isPhoneNo($(obj).val())) {
            isPhone = true;
            checkAll();
        } else {
            isPhone = false;
            checkAll();
        }
    }
    function send() {

    }
    function checkAll() {
        isAgree = $("#agree").prop("checked");
        if (isName && isNo && isPhone && isAgree) {
            $(".checkBtn").removeClass("disable");
            $(".checkBtn").unbind("click").bind("click", function () {
                CardInfoNext()
            });
        } else {
            $(".checkBtn").addClass("disable");
            $(".checkBtn").unbind("click").bind("click", function () {
                noPass()
            });


        }
    }
    $("#agree").click(function () {
        checkAll()
    })
    function CardInfoNext() {
        alert("已提交，等待审核")
    }
    function noPass() {
        var msg = "";
        if (!isName) {
            msg = "请填写正确名字";
        } else if (!isNo) {
            msg = "请填写正确身份证";
        } else if (!isPhone) {
            msg = "请填写正确手机号";
        } else {
            msg = "请同意服务协议";
        }
        api.toast({
            msg: msg
        })
    }
</script>
</html>
